@import '../../containers/Application/colors.scss';

$color: $wildSand;
$activeBorderColor: $shakespeare;
$activeBackgroundColor: $ebonyClay;
$hoverColor: $shakespeare;

.item {
    font-size: 14px;
    line-height: 16px;
    box-sizing: border-box;
    padding-left: 4px;
    position: relative;

    &.active {
        border-left: 4px solid $activeBorderColor;
        background: $activeBackgroundColor;
        font-weight: bold;
        padding-left: 0;
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        color: $color;
        padding: 20px;
        border: 0;
        background-color: transparent;
        text-align: left;
        font-weight: inherit;
        cursor: pointer;

        &:hover,
        &:focus {
            color: $hoverColor;
        }

        .icon {
            flex: 0 0 auto;
            margin-right: 20px;
            width: 15px;
        }

        .text {
            flex: 1 1 auto;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .children-indicator {
            flex: 0 0 auto;
            margin-left: 20px;
        }
    }

    /* Child */
    .item {
        font-size: 12px;
        background: inherit;
        font-weight: normal;
        margin-left: 0;
        padding-left: 0;

        .title {
            padding-top: 0;
            padding-bottom: 15px;
            padding-left: 55px;
        }

        &.active {
            border-left: none;
            font-weight: bold;
            background: inherit;
        }
    }
}
